<template>
  <div>
         <div class="caidanming"><strong>登录 /</strong>管理员登录</div>  
      <div class="title">管理员登录</div>
    <!-- 我是管理员登录页面 -->
    <div class="tjkuang">
    <el-button type="text" @click="dialogFormVisible = true"
      >
      <i class="el-icon-circle-plus-outline"></i>
      <span class="span">创建诊所</span></el-button
    ></div>

    <el-dialog
      title="创建诊所"
      :visible.sync="dialogFormVisible"
      class="toubu"
      width="500px"
    >
      <hr />
      <el-form :model="form" :rules="rules">
        <div class="touxiangdiv">
          <div class="touxiang">
            <!-- <img src="../../static/img/02.jpg" alt="" class="img"/> -->
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-camera-solid"></i>
            </el-upload>
          </div>

          <p>在这里设置诊所的名称和图标</p>
        </div>
        <el-form-item prop="name">
          <el-input
            type="text"
            placeholder="为诊所命名"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>
        <span
          >是否初始化 <el-radio v-model="radio" label="0">是</el-radio>
          <el-radio v-model="radio" label="1">否</el-radio></span
        >
        <p class="p1">初始化:诊所内提供用户试用的测试数据</p>
        <p class="p2">不初始化：诊所内无任何数据</p>
        <el-dialog
          width="30%"
          title="创建状态"
          :visible.sync="innerVisible"
          append-to-body
        >
        <div class="chuangjian">
          <i class="el-icon-circle-check"></i>
          <p class="chenggong">诊所创建成功 现在邀请伙伴一起加入吧！</p>
          </div>
          <div class="yaoqing">
          <p class="yaoqing1">邀请成员</p>
          <input type="text" placeholder="请输入邀请帐号" class="input">
          <button class="btn">邀请</button>
          </div>
          <el-checkbox-group v-model="checkList">
    <el-checkbox label="管理员"></el-checkbox>
    <el-checkbox label="医生"></el-checkbox>
    <el-checkbox label="医务"></el-checkbox>
    <el-checkbox label="会计"></el-checkbox>
  </el-checkbox-group>
  <p>邀请成员记录</p>
  <br/>
    <br/>
     <br/>
    <br/>
    <button class="btn1">跳过</button>
    <button class="btn2">完成</button>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="innerVisible = true" class="xiayibu"
          >下一步</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 图片上传
      imageUrl: '',
      // 复选框
 checkList: ['管理员'],
      form: {
        type: [],
      },
      dialogFormVisible: false,
      innerVisible: false,
      radio: '1',
      //   input 框必填绑定
      ruleForm: {
        name: '',
      },
      //   input 框绑定的必填事件
      rules: {
        name: [
          { required: true, message: '诊所名不能为空', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      formLabelWidth: '120px',
    };
  },
  methods: {
    // 图片上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },


  },
};
</script>
<style scoped>
.tjkuang{
width: 230px;
height: 330px;
background-color: rgb(221, 209, 209);
border: 1px solid rgb(204, 204, 204);
}
.span{
font-size: 20px;
color: grey;
position: relative;
top:120px;
left: 0px;
}
.tjkuang >>>.el-icon-circle-plus-outline{
font-size: 56px;
font-weight: bolder;
color: grey;
position: relative;
top:80px;
left: 80px;
}
.toubu {
  text-align: center;
  font-weight: bolder;
}
hr {
  position: relative;
  top: -15px;
  color: rgb(167, 167, 167);
}
.touxiangdiv {
  height: 260px;
 
  /* line-height: 90px; */
}
.touxiang {
  position: relative;
  top: 30px;
  left: 150px;
  width: 150px;
  height: 150px;
  /* line-height: 50px; */
  border-radius: 50%;
   background: url(../../static/img/02.jpg)no-repeat 4px 5px;
  /* background-color: hotpink; */
}
.img {
  width: 100%;
  height: 100%;
  /* position: relative;
    top: 0px;
    left: 150px; */
}
/* -----------图片上传----------- */
.touxiang i{
 position: relative;
 top: -10px;
 left: -15px;
 
}
.touxiang >>>.el-icon-camera-solid{
  /* width: 300px ! important;
  height: 200px ! important; */
  /* background-color: rgb(209, 209, 209); */
   font-size: 45px;
  color: #8d8585;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;

}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/* .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
} */
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
/* ------结束分界线------- */
.p1,
.p2 {
  text-align: center;
  color: red;
}
.xiayibu {
  text-align: center;
  width: 100%;
  height: 45px;
  color: white;
  background-color: rgb(38, 189, 174);
}
.touxiangdiv p {
  color: rgb(151, 151, 151);

  line-height: 100px;
}
.el-icon-circle-check {
  font-size: 100px;
  color: rgb(18, 189, 152);
  position: relative;
  top: 0px;
  left: 150px;
}
.chenggong {
  font-size: 18px;
  color: rgb(18, 189, 152);
  text-align: center;
}
/* .hr2 {
  position: relative;
  top: 10px;
  color: rgb(167, 167, 167);
} */
.chuangjian{
  width: 100%;
  height: 165px;
  /* border: 1px solid red; */
  border-bottom:2px solid rgb(175, 175, 175);
}
.yaoqing{
  width: 100%;
  height: 90px;
  /* border: 1px solid red; */
  border-bottom:2px solid rgb(175, 175, 175);
}
.yaoqing1 {
  font-size: 20px;
}
.input{
  outline: 0 none ! important;
height: 40px;
font-size: 16px;
border: none;
color: rgb(151, 151, 151);
}
.btn{
   outline: 0 none ! important;
   width: 75px;
  height: 35px;
  color: white;
  border-radius: 6%;
  background-color: #39b9ae;
  border:1px solid #39b9ae;
  position: relative;
  top: 0px;
  left: 140px;
  /* background-color: rgb(18, 189, 152); */
}
.btn1{

    width: 75px;
  height: 35px;
  color: rgb(170, 170, 170);
  border-radius: 6%;
  background-color: #ffffff;
  border:1px solid #ffffff;
   outline: 0 none ! important;
}
.btn2{
    width: 75px;
  height: 35px;
  color: white;
  border-radius: 6%;
  background-color: #39b9ae;
  border:1px solid #39b9ae;
   position: relative;
  top: 0px;
  left: 260px;
   outline: 0 none ! important;
}
/* 外边距的顺序: 上 左 下 右 */
.caidanming {
  margin: 10px 0px 10px 10px;
}
.title {
  font-size: 30px;
  margin-top: 20px;
  font-weight: bold;
  margin: 20px 50px 25px 10px;
}
</style>